<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #app {
    height: 100%;
    width: 100%;
  }
  html, body {
    height: 100%;
    width: 100%;
  }
</style>
<body>
  <div id="app"></div>
  <script>
    var process = { env: { NODE_ENV: "development" } }
  </script>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <link rel="stylesheet" href="/renderer/style.css">
  <script type="module">
    import Renderer from '/renderer/index.js'
    import initEditor from '/editor/index.js'
    const options = {
      id: 'app'
    }
    let json = {
      "type": "page",
      "title": "默认标题",
      "routeName": "default",
      "initApi": "",
      "content": [
        {
          "componentName": "Input",
          "id": "comp_b3b410e4-45ec-4404-9178-d0ef071254ec",
          "data": {
            "placeholder": "请输入",
            "style": {
              "display": "block"
            },
            "type": ""
          }
        },
        {
          "componentName": "Button",
          "id": "comp_c1112876-14f3-4ca1-999d-7ea9f4a1e0e7",
          "data": {
            "children": "确定"
          }
        }
      ]
    }
    const container = document.getElementById('app');

    window.addEventListener("message", receiveMessage, false);

    function receiveMessage (event) {
      console.log("我是iframe", event);
      json = event.data.json
      render()
    }

    function render () {
      const root = ReactDOM.createRoot(container);
      root.render(Renderer({ jsonObj: json }));
      initEditor(json, options)
    } 
    render()
  </script>
</body>

</html>